<template>
	<div class="type">
			<el-row justify="space-between">
				<el-col :span="4">
					<span>类型</span>
				</el-col>
				<el-col :span="3">
					<span><el-button type="primary" @click="add()"><el-icon><circle-plus /></el-icon>添加</el-button></span>
				</el-col>
			</el-row>
			<div class="border-bottom"></div>
			 <el-table :data="list" border style="width: 100%">
			    <el-table-column prop="id" label="类型ID" width="180" />
			    <el-table-column prop="type" label="书本类型"  />
			    <el-table-column label="功能" width="180">
					 <template #default="scope">
						 <el-button type="primary" 
						 @click="updete(scope.row.id,scope.row.type)"
						 class="el-button--small"
						 >
						 <el-icon><edit /></el-icon>修改
						 </el-button>
					</template>
				</el-table-column>
			  </el-table>
			  <el-dialog v-model="outerVisible" title="类型信息">
				  <p class="inp">
					<span>ID</span>
					<el-input v-model="typeId" :readonly="true" />
				  </p>
				  <p class="inp">
					<span>类型</span>
					<el-input v-model="typeName" />
				  </p>
			      <template #footer>
			        <div class="dialog-footer">
			          <el-button @click="getbut()">{{txt}}</el-button>
			        </div>
			      </template>
			  </el-dialog>
	</div>
</template>

<script>
	import { ref } from 'vue'
	import {CirclePlus,Edit} from '@element-plus/icons-vue'
	export default{
		name:'Type',
		data(){
			return{
				list:[],
				txt:'添加',
				typeName:'',
				typeId:'',
				outerVisible:false,//弹出框默认隐藏
			}
		},
		setup() {
		     return {
		       innerVisible: ref(false),
		     }
		},
		components:{
			CirclePlus,
			Edit
		},
		methods:{
			//修改数据
			updete(id,type){
				this.outerVisible=true
				this.txt='修改';
				this.typeName=type;
				this.typeId=id
			},
			//添加数据
			add(){
				this.txt='添加'
				this.outerVisible=true
				this.typeName='';
				this.typeId=0
			},
			//确认
			getbut(){
				this.outerVisible=false
				if(this.txt==='修改'&&this.typeName!=''||this.txt==='添加'&&this.typeName!=''){
					/*
						请求地址：'/api/adm/type/add'
						提交的数据：this.$qs.stringify(data)
						配置headers对象
					*/
					let data = {
						id:this.typeId,
						type:this.typeName
					};
					this.axios.post('/api/adm/type/add',this.$qs.stringify(data),{
						headers:{'Content-Type':'application/x-www-form-urlencoded ; charset=UTF-8'},
					}).then((res)=>{
						if(res.status===200){
							this.list = res.data.data;
						}
					}).catch((error)=>{
						console.log(error);
					})
				}
			}
		},
		created(){
			this.axios.get('/api/adm/type/findAll').then((res)=>{
				this.list = res.data.data
			}).catch((error)=>{
				console.log(error);
			})
		}
	}
</script>

<style scoped>
	.dialog-footer{
		text-align: left;
	}
	.inp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.el-input{
		width: 90% !important;
	}
	.border-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	.el-col-4 span{
		font-weight: bold;
	}
	:deep(.el-row){
		display: flex;
		align-items: center;
	}
	.el-button--primary{
		font-size: 12px;
	}
	.type{
		overflow: auto;
		width: 100%;
		height: 100%;
		background-color: white;
	}
</style>
